<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    [v-cloak] {
        display: none;
    }
</style>

<body>
    <div id="app" v-cloak>
        父组件的num ->{{num1}}
        <soncpn :sonnumber='num1' @sonnumbers="sonNum"></soncpn>
    </div>
</body>

<template id="soncpn">
    <div>
        子组件的num->{{dnum}}
        <br>
        <input type="text" v-model="dnum">
    </div>
</template>

<script src="../js/http_cdn.bootcdn.net_ajax_libs_vue_2.6.6_vue.js"></script>
<script>
    new Vue({
        el: "#app",
        components: {
            soncpn: {
                template: '#soncpn',
                props: ['sonnumber'],
                data() {
                    return {
                        dnum: this.sonnumber
                    }
                },
                watch: {
                    dnum(Nv,Ov){
                        this.$emit("sonnumbers", Nv)
                    }
                },
            }
        },
        data: {
            num1: 1
        },
        methods: {
            sonNum(event) {
                console.log(event)
                this.num1 = event
            }
        },

    })
</script>

</html>
